/* Estilos específicos para la página Quiénes Somos alineados con Inicio.css */

/* Imagen de ancho completo */
.qs-hero {
    width: 100%;
    overflow: hidden;
    background: #fff9ed;
}

.qs-hero-img {
    width: 100%;
    height: 42vh; /* un poco largo pero sin estirarse demasiado */
    object-fit: cover; /* asegura buena proporción */
    display: block;
}

/* Título centrado */
.qs-title {
    text-align: center;
    padding: 28px 12px 10px 12px;
}

.qs-title h1 {
    font-size: 2.2em;
    color: #222;
    font-family: 'Montserrat', Arial, sans-serif;
}

/* Sección de contenido en dos columnas */
.qs-section {
    background: #f5f5f5;
    padding: 30px 0 40px 0;
}

.qs-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr; /* izquierda más angosta, derecha más amplia */
    gap: 36px;
    align-items: start;
}

/* Columna izquierda */
.qs-left {
    background: #fff;
    border-radius: 10px;
    padding: 20px 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.qs-left h2 {
    font-size: 1.4em;
    color: #222;
    font-family: 'Montserrat', Arial, sans-serif;
    margin-bottom: 8px;
}

.qs-left p,
.qs-left ul {
    font-size: 1.05em;
    color: #333;
    font-family: 'Montserrat', Arial, sans-serif;
    line-height: 1.6;
    margin: 6px 0;
}

.qs-left ul {
    padding-left: 18px;
}

/* Columna derecha */
.qs-right {
    background: #fff;
    border-radius: 10px;
    padding: 22px 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    text-align: justify; /* lectura cómoda */
}

.qs-right p {
    margin: 10px 0;
    font-size: 1.05em;
    color: #333;
    line-height: 1.8;
}

/* Responsive */
@media (max-width: 900px) {
    .qs-hero-img {
        height: 38vh;
    }
    .qs-container {
        grid-template-columns: 1fr; /* apilar columnas */
        gap: 22px;
        padding: 0 14px;
    }
    .qs-right {
        text-align: left; /* para mejor lectura en móvil */
    }
}

@media (max-width: 600px) {
    .qs-hero-img {
        height: 34vh;
    }
    .qs-title h1 {
        font-size: 1.8em;
    }
}